<template>
  <!-- 书籍详情页面 -->
  <div class="detail">
    <span @click="this.$router.go(-1)" class="back">返回上一页</span>
    <div class="info">
      <div class="book-img">
        <img :src="detalList.cover" alt="" class="detail-cover">
      </div>
      <div class="book-info">
        <div class="title">{{detalList.title}}</div>
        <div class="author">{{detalList.author}} · 著</div>
        <div class="fictionType">{{detalList.fictionType}}</div>
        <div class="descs">{{detalList.descs}}</div>
        <div class="uptime">{{detalList.updateTime}}</div>
      </div>
      <!--章节目录-->
    </div>
    <div class="chapterList">
      <h3>目录</h3>
      <ul class="chapter">

        <li v-for="(list, index) in detalList.chapterList" :key="index">
          <!--          <span>第{{index+1}}章</span>-->
          <router-link :to="{
            path: '/info',
            query:{chapterId:list.chapterId}
          }">
            <span>{{list.title}}</span>
          </router-link>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Details',
  data () {
    return {
      detalList: ''
    }
  },
  methods: {
    getData () {
      this.$http.request({
        url: 'https://api.pingcc.cn/fictionChapter/search/' + this.$route.query.fictionId,
        method: 'get'
      })
        .then((res) => {
          console.log(res.data.data)
          this.detalList = res.data.data
        })
        .catch((err) => {
          console.log(err)
        })
    }
  },
  mounted () {
    console.log(this.$route)
    this.getData()
  }
}
</script>

<style scoped>
.detail{
  width: 1200px;
  margin: 0 auto;
}
.info{
  display: flex;
}
.book-img{
  /*float: left;*/
  height: 250px;
}
.detail-cover{
  height: 240px;
  width: 180px;
  border-radius: 5px;
  box-shadow: 2px 2px 8px #7c7c7c ;
}
.book-info{
  margin-left: 20px;
  padding: 10px 50px;
}
.book-info>div{
  margin: 10px 0;
}
.title{
  font-size: 35px;
  font-weight: 800;
}
.fictionType{
  width: 80px;
  height: 25px;
  line-height: 25px;
  border-radius: 20px;
  font-size: 12px;
  text-align: center;
  border: 2px solid #f68282;
  color: #f31313;
}
.descs{
  color: #9d9d9d;
  padding: 0 120px 0 0;
}
.uptime{
  color: #b9b9b9;
}
.back{
  width: 150px;
  height: 50px;
  line-height: 50px;
  text-align: center;
  border-radius: 15px;
  color: #FFFFFF;
  font-weight: 800;
  display: inline-block;
  font-size: 20px;
  cursor: pointer;
  margin: 10px 5px 20px;
  background-color: #50940b;
}
.chapterList{
  margin-top: 50px;
}
.chapterList>h3{
  font-size: 1.5rem;
  padding-bottom: 20px;
  border-bottom: 2px solid #2a2a2a;
}
.chapter{
  /*width: 1050px;*/
  /*margin-top: 10px;*/
  display: flex;
  flex-wrap: wrap;
  /*margin: 10px auto;*/
}
.chapter>li{
  /*float: left;*/
  /*width: 290px;*/
  width: 30%;
  height: 60px;
  font-size: 16px;
  line-height: 60px;
  padding-right: 3.3%;
  /*超出省略号*/
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  border-bottom: 1px solid #c5c5c5;
}
.chapter>li :hover{
  color: #e82337;
}
.chapter>li span{
  color: #1b1b1b;
}
</style>
